<template>
    <div class="container">
      <el-dialog
        :title="dialog.dialogType === 'edit' ? '修改改账单' : '创建改账单'"
        :visible.sync="dialog.dialogVisible"
        width="500px"
        fullscreen
        center
        :lock-scroll="true"
        @close="hideDialog"
        @open="getData"
      >
        <div class="main">
          <div class="left">
            <div class="title">原账单</div>
            <el-form
              ref="form"
              :rules="rules"
              :model="formData1"
              label-width="100px"
              label-position="left"
            >
              <el-form-item label="供应商编码：">
                <p class="inps">
                  {{ formData1.supplier ? formData1.supplier.code : "" }}
                </p>
              </el-form-item>
              <el-form-item label="供应商名称：">
                <p class="inps">
                  {{ formData1.supplier ? formData1.supplier.name : "" }}
                </p>
              </el-form-item>
              <el-form-item label="配送中心编码：">
              <p class="inps">
                {{ formData1.dccode }}
              </p>
            </el-form-item>
            <el-form-item label="配送中心名称：">
              <p class="inps">
                {{ formData1.dcname }}
              </p>
            </el-form-item>
              <el-form-item label="采购员编码：">
                <p class="inps">
                  {{ formData1.buyer_code }}
                </p>
              </el-form-item>
              <el-form-item label="采购员名称：">
              <p class="inps">
                {{ formData1.buyer_name }}
              </p>
            </el-form-item>
              <el-form-item label="金额：">
                <p class="inps">
                  {{ formData1.amount }}
                </p>
              </el-form-item>
              <el-form-item label="数量：">
                <p class="inps">
                  {{ formData1.goods_num }}
                </p>
              </el-form-item>
              <el-form-item label="单价：">
                <p class="inps">
                  {{ formData1.goods_price }}
                </p>
              </el-form-item>
            </el-form>
          </div>
          <div class="right">
            <div class="title">改账单</div>
            <div class="search"></div>
            <el-form
              ref="form"
              :rules="rules"
              :model="formData"
              label-width="100px"
              label-position="left"
            >
              <el-form-item label="改账金额：">
                <p class="inps">
                  {{ formData.amount }}
                </p>
              </el-form-item>
              <el-form-item label="改账数量：">
                <p class="inps">
                  {{ formData.num }}
                </p>
              </el-form-item>
              <el-form-item label="改账单价：">
                <p class="inps">
                  {{ formData.price }}
                </p>
              </el-form-item>
              <el-form-item label="改账件数：">
                <p class="inps">
                  {{ formData.qty }}
                </p>
              </el-form-item>
              <el-form-item label="改账供应商：">
                <p class="inps">
                  {{ supplierData.value }}
                </p>
              </el-form-item>
            </el-form>
            <div class="institution">
              <el-table :data="institutionList" border style="width: 1000px">
                <el-table-column align="center" prop="org_name" label="机构名称">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="org_amount"
                  label="调整金额"
                >
                </el-table-column>
                <el-table-column align="center" prop="org_num" label="调整数量">
                </el-table-column>
                <el-table-column align="center" prop="org_qty" label="调整件数">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  <script>
  import { getToken } from "@/utils/auth";
  import { Loading } from "element-ui";
  import { readCorrect } from "@/api/changeAccount/superChangeAccount";
  
  export default {
    props: {
      dialog: Object
    },
    data() {
      return {
        institutionList: [],
        formData1: {},
        formData: {
          amount: 0,
          num: 0,
          price: 0,
          qty: 0
        },
        rules: {},
        supplierData: {
          innerVisible: false,
          value: "",
          id: "",
          list: [],
          loading: false
        },
        
      };
    },
    created() {},
    methods: {
      getData() {
        let data = {
          id: this.dialog.id
        };
        readCorrect(data).then(res => {
          this.formData1 = res.data.correct.statement;
  
          this.formData = {
            amount: res.data.correct.amount,
            num: res.data.correct.num,
            price: res.data.correct.price,
            qty: res.data.correct.qty
          };
          this.supplierData.value = res.data.correct.supplier_name;
          this.supplierData.id = res.data.correct.supplier_id;
          this.institutionList = Object.values(res.data.correct.orglist);
        });
      },
      hideDialog() {
        this.institutionList = [];
        this.formData1 = {};
        this.formData = {
          amount: 0,
          num: 0,
          price: 0,
          qty: 0
        };
        this.supplierData = {
          innerVisible: false,
          value: "",
          id: "",
          list: [],
          loading: false
        };
       
        this.dialog.dialogVisible = false;
      },
  
      //取消
      cancel() {
        this.hideDialog();
      }
    }
  };
  </script>
  <style scoped>
  .main {
    display: flex;
    justify-content: space-around;
  }
  .main .inp {
    width: 400px;
  }
  .main .inps {
    padding: 0;
    border-radius: 4px;
    color: #606266;
    display: inline-block;
    height: 37px;
    line-height: 37px;
    padding: 0 15px;
  
    width: 400px;
    margin: 0;
  }
  .main .left {
    width: 45%;
  }
  .main .right {
    width: 45%;
  }
  .main .title {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }
  .search {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    height: 45px;
  }
  .search .searchName {
    width: 100px;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
  }
  .search .searchInp {
    width: 250px;
    margin-right: 10px;
  }
  .el-form-item__content {
    height: 40px !important;
    overflow: hidden;
  }
  .el-form-item {
    margin-bottom: 15px !important;
    height: 40px !important;
    overflow: hidden;
  }
  .institution {
    width: 700px;
  }
  </style>
  